<template>
  <a-modal
    v-model:visible="showModal"
    :mask-closable="false"
    title="备注"
    @cancel="onClose"
    @before-ok="onConfirm"
    width="45vw"
    unmount-on-close
  >
    <a-table :columns="columns" :data="data" :pagination="false" :bordered="{ cell: true }" />
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
<script setup>
  import { ref } from 'vue'
  import { getRemarkLogApi } from '@/api/order/sOrder'

  const showModal = ref(false)
  const columns = [
    {
      title: '备注类型',
      dataIndex: 'operateTypeName',
      width: 100,
    },
    {
      title: '订单状态',
      dataIndex: 'orderStatus',
      width: 130,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 190,
    },
    {
      title: '操作人',
      dataIndex: 'createUserName',
      width: 100,
    },
    {
      title: '备注信息',
      dataIndex: 'operateLog',
    },
  ]

  const data = ref([])
  const getRemarkLoge = (id) => {
    getRemarkLogApi({ id: id }).then((res) => {
      if (res.code == 200) {
        data.value = res.result
      }
    })
  }

  const emit = defineEmits(['ok'])

  const show = (id) => {
    showModal.value = true
    getRemarkLoge(id)
  }

  const onClose = () => {
    emit('ok')
    showModal.value = false
    data.value = []
  }

  defineExpose({
    show,
  })
</script>
